<!-- components/fullscreen.html -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<style>
.fullscreen-component {
    display: inline-block;
    margin-left: 15px;
}

.fullscreen-toggle {
    color: #90e0ef;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
    background: none;
    border: none;
    padding: 5px;
}

.fullscreen-toggle:hover {
    color: #00b4d8;
    transform: scale(1.1);
}

:fullscreen .filter,
:fullscreen .summary-container {
    background-color: rgba(0,0,0,0.8) !important;
    padding: 15px !important;
}
</style>
<body></body>
<!--
<button class="fullscreen-toggle" title="进入全屏">
    <i class="fas fa-expand"></i>
</button> -->

<script>
(function() {
	const button = document.createElement('button');
	button.className = 'fullscreen-toggle';
	button.title = '进入全屏';
	button.innerHTML = '<i class="fas fa-expand"></i>';
	document.body.appendChild(button);

    const toggleBtn = document.currentScript.parentElement.querySelector('.fullscreen-toggle');
    const icon = toggleBtn.querySelector('i');
    
    function toggleFullscreen() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen()
                .then(() => updateIcon(true))
                .catch(err => console.error("全屏错误:", err));
        } else {
            document.exitFullscreen()
                .then(() => updateIcon(false));
        }
    }
    
    function updateIcon(isFullscreen) {
        icon.className = isFullscreen ? 'fas fa-compress' : 'fas fa-expand';
        toggleBtn.title = isFullscreen ? '退出全屏' : '进入全屏';
    }
    
    toggleBtn.addEventListener('click', toggleFullscreen);
    
    document.addEventListener('fullscreenchange', () => {
        updateIcon(!!document.fullscreenElement);
    });
})();
</script>